<template>
  <div class="custom-node">
    <handle
      type="source"
      :position="Position.Right"
      :style="{
        height: '16px',
        width: '6px',
        backgroundColor: '#0967cc',
      }"
    />
    <handle
      type="target"
      :position="Position.Left"
      :style="{
        height: '16px',
        width: '6px',
        backgroundColor: '#0967cc',
      }"
    />

    <node-toolbar
      :is-visible="data.toolbarVisible"
      :position="Position.Top"
    >
      <a-button status="danger" @click="removeNodes(id)">
        删除
      </a-button>
    </node-toolbar>

    <a-tag color="arcoblue">
      事件处理节点
    </a-tag>
    <a-form
      auto-label-width
      size="mini"
      label-align="left"
      style="margin-top: 10px; padding: 0 5px;"
    >
      <a-form-item label="控件">
        <a-select
          v-model="data.formId"
          placeholder="Please select ..."
          allow-clear
          :style="{width:'240px'}"
          @change="onFromChange"
        >
          <a-option
            v-for="item of fromList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </a-select>
      </a-form-item>
      <a-form-item label="执行动作">
        <a-select
          v-model="data.eventKey"
          placeholder="Please select ..."
          :style="{width:'240px'}"
        >
          <a-option
            v-for="item of actionList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </a-select>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted } from 'vue';
import { Handle, useVueFlow, Position } from '@vue-flow/core';
import { NodeToolbar } from '@vue-flow/node-toolbar';
import { FormActionInfo, Props, SelectOptions } from '@/components/form-design/event/type';
import { ACTION_MAP } from '@/components/form-design/event';

const props = defineProps<Props>();

const { removeNodes, updateNodeData } = useVueFlow();


const fromList = ref<Array<SelectOptions>>([]);

const actionList = ref<Array<SelectOptions>>([]);


const onFromChange = (value: string) => {
  updateNodeData(props.id, {
    eventKey: undefined
  });
  const list = ACTION_MAP.get(value)?.actionList || [];
  actionList.value = list.map((item) => {
    return {
      value: item.key,
      label: item.name
    };
  });
};


onMounted(() => {
  ACTION_MAP.forEach((value: FormActionInfo, key: string, map: Map<string, FormActionInfo>) => {
    fromList.value.push({
      value: key,
      label: value?.formLabel
    });
  });
});

</script>


<style lang="less" scoped>
.custom-node {
  min-width: 100px;
  gap: 4px;
  padding: 0;
  background: white;
  border: 1px solid #0967cc;
  border-radius: 1px;
}
</style>
